<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="topbar::static">
<body>

<nav th:replace="topbar::topbar"></nav>

<div class="container-fluid">
    <div class="row">
        <div th:replace="topbar::sidebar(activeUri='vnfinstance.html')"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">5GC MANO</h1>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createVnfInstance">
                新增vnfInstance
            </button>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>vnf实例名称</th>
                        <th>描述</th>
                        <th>vnfdId</th>
                        <th>vnfProvider</th>
                        <th>vnf产品名称</th>
                        <th>vnf软件版本</th>
                        <th>vnfdVersion</th>
                        <th>实例化状态</th>
                        <th>flavourId</th>
                        <th>vnfState</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="vnfInstance:${vnfInstances}">
                        <td th:text="${vnfInstance.id}"></td>
                        <td th:text="${vnfInstance.vnfInstanceName}"></td>
                        <td th:text="${vnfInstance.vnfInstanceDescription}"></td>
                        <td th:text="${vnfInstance.vnfdId}"></td>
                        <td th:text="${vnfInstance.vnfProvider}"></td>
                        <td th:text="${vnfInstance.vnfProductName}"></td>
                        <td th:text="${vnfInstance.vnfSoftwareVersion}"></td>
                        <td th:text="${vnfInstance.vnfdVersion}"></td>
                        <td th:text="${vnfInstance.instantiationState}"></td>
                        <td th:text="${vnfInstance.flavourId}"></td>
                        <td th:text="${vnfInstance.vnfState}"></td>
                        <td>
                            <button type="button" class="btn btn-default" aria-label="Left Align"
                                    th:onclick="|instantiate(${vnfInstance.id})|">
                                实例化
                            </button>
                            <button type="button" class="btn btn-primary" aria-label="Left Align"
                                    data-toggle="modal" data-target="#scaleVnfInstance"
                                    th:onclick="|fillIdForScale(${vnfInstance.id})|">
                                伸缩
                            </button>
                            <button type="button" class="btn btn-danger" aria-label="Left Align"
                                    th:onclick="|terminate(${vnfInstance.id})|">
                                终止
                            </button>
                            <button type="button" class="btn btn-danger" aria-label="Left Align"
                                    th:onclick="|deleteVnfInstance(${vnfInstance.id})|">
                                <span class="glyphicon glyphicon-remove"></span>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!--模态框，用于新增vnfInstace-->
<div id="createVnfInstance" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增vnfInstance</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <div class="table-responsive">
                        <thead>
                        <tr>
                            <th>vnfInstanceName</th>
                            <th>vnfInstanceDescription</th>
                            <th>vnfdId</th>
                            <th>flavourId</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="text" class="form-control" id="vnfInstanceName"></td>
                            <td><input type="text" class="form-control" id="vnfInstanceDescription"></td>
                            <td>
                                <select id="vnfdId" class="selectpicker" onchange="fillFlavourInfo()">
                                    <option class="form-control" th:each="vnfd:${vnfds}" th:value="${vnfd.vnfdId}"
                                            onclick="fillFlavourInfo()">
                                        vnfProductName:<span th:text="${vnfd.vnfProductName}"></span>+
                                        vnfdVersion:<span th:text="${vnfd.vnfdVersion}"></span>
                                    </option>
                                </select>
                            </td>
                            <td>
                                <input id="flavourId" type="text" class="form-control" readonly="readonly">
                            </td>
                        </tr>
                        </tbody>
                    </div>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="create()">保存</button>
            </div>
        </div>
    </div>
</div>

<!--模态框，用于伸缩vnfInstace-->
<div id="scaleVnfInstance" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">伸缩vnfInstance</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <div class="table-responsive">
                        <thead>
                        <tr>
                            <th>vnfInstanceId</th>
                            <th>scaleVnfType</th>
                            <th>vnfcTargetNumber</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input id="vnfInstanceId" type="text" class="form-control" readonly="readonly"></td>
                            <td>
                                <select id="scaleVnfType" class="selectpicker">
                                    <option class="form-control">SCALE_OUT</option>
                                    <option class="form-control">SCALE_IN</option>
                                </select>
                            </td>
                            <td><input id="vnfcTargetNumber" type="text" class="form-control"></td>
                        </tr>
                        </tbody>
                    </div>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="scale()">保存</button>
            </div>
        </div>
    </div>
</div>


</body>
<script th:inline="javascript">
    var baseUrl = "http://"+hostIp+":8002/vnf_instances/";

    window.onload = function () {
        fillFlavourInfo();
    };

    function fillFlavourInfo() {
        var targetVnfdId = $("#vnfdId").val();
        var vnfds = [[${vnfds}]];
        var flavourId;
        vnfds.forEach(function (vnfd) {
            if (vnfd.vnfdId == targetVnfdId) {
                flavourId = vnfd.deploymentFlavour;
            }
        });
        $("#flavourId").val("" + flavourId);
    }

    function fillIdForScale(id) {
        $("#vnfInstanceId").val(id);
    }

    function create() {
        var url = baseUrl + "create";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "vnfInstanceName": $("#vnfInstanceName").val(),
                "vnfInstanceDescription": $("#vnfInstanceDescription").val(),
                "vnfdId": $("#vnfdId").val(),
                "flavourId": $("#flavourId").val()
            },
            complete: function (id) {
                alert("vnf_instances创建成功");
                reload();
            }
        });
    }

    function instantiate(id) {
        var url = baseUrl + "instantiate";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "id": id
            },
            complete: function (id) {
                alert("vnf_instances实例化成功");
                reload();
            }
        });
    }

    function scale() {
        var url = baseUrl + "scale";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "vnfInstanceId": $("#vnfInstanceId").val(),
                "scaleVnfType": $("#scaleVnfType").val(),
                "vnfcTargetNumber": $("#vnfcTargetNumber").val()
            },
            complete: function (id) {
                alert("vnf_instances伸缩成功");
                reload();
            }
        });
    }

    function terminate(id) {
        var url = baseUrl + "terminate";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "id": id
            },
            complete: function (id) {
                alert("vnf_instance中止成功");
                reload();
            }
        });
    }

    function deleteVnfInstance(id) {
        //异步删除nsd
        var url = baseUrl + "delete";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "id": id
            },
            complete: function (id) {
                alert("vnf实例删除成功");
                reload();
            }
        });
    }

    function reload() {
        $("#createVnfInstance").modal('hide');
        $("#scaleVnfInstance").modal('hide');
        window.location.reload();
    }
</script>
</html>
